<template>
    <div class="videoPage">
        <h3 class="title">应急仓周边监控</h3>
        <div class="videoBox">
            <video 
                ref="videoPlayer"
                :src="videoUrl" 
                autoplay 
                loop 
                muted
                style="width: 100%; height: 100%; object-fit: cover;"
            ></video>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            videoUrl: require('../../../../static/images/commonServer/monitor.mp4')
        }
    }
}
</script>

<style lang="scss" scoped>
    .videoPage{
        display: flex;
        flex-direction: column;
        padding-bottom:1rem;
        .title{
            line-height:2.8rem;
            letter-spacing: .2rem;
            font-size:1.2rem;
            text-align:left;
            height:2.8rem;
            margin-left:1.5rem;
        }
        .videoBox{
            width:90%;
            height:15rem;
            margin:0 auto;
        }
    }
</style>